<script lang="ts">
  import Title from "../../../components/Title/Title.svelte";
  import Quota from "../../../components/Quota/Quota.svelte";
  import {monitor} from "../stores";
</script>

<div class="h-full flex flex-col">
  <Title title="车辆状态监控"/>
  <div class="flex flex-1 w-full overflow-hidden">
    <div class="basis-1/2 flex overflow-hidden">
      <div class="thumbnail w-full align-center bg-center bg-no-repeat bg-contain"></div>
    </div>
    <div class="basis-1/2 flex justify-center">
      <div class="flex flex-col h-full w-full ml--5">
        {#if $monitor}
          <div class="basis-1/2 flex justify-center items-end gap-1 overflow-hidden">
            <div class="w-1/3">
              <Quota label="编 号" value="{$monitor.vinNo}" unit="-KB"/>
            </div>
            <div class="w-1/3">
              <Quota label="状 态" value="" unit="{$monitor.vinStatus}"/>
            </div>
          </div>
          <div class="basis-1/2 flex gap-1 content-center">
            <div class="w-1/3 ">
              <Quota label="电 压" value="{$monitor.voltage}" unit="V"/>
            </div>
            <div class="w-1/3 ">
              <Quota label="电 流" value="{$monitor.current}" unit="A"/>
            </div>
            <div class="w-1/3 ">
              <Quota label="速 度" value="{$monitor.speed}" unit="M/S"/>
            </div>
          </div>
        {/if}
      </div>
    </div>
  </div>
</div>

<style>
  .thumbnail {
    margin-right: -40px;
    aspect-ratio: 961/646;
    background-image: url('./thumbnail.png');
  }

  .ml--5 {
    margin-left: -36%;
  }

</style>
